<template>
  <div class="singer-wrapper">
      <v-app-bar
        extended
        extension-height="40"
        absolute
        scroll-target="#singer-list"
        >
        <v-icon @click="$router.go(-1)">
            mdi-arrow-left
        </v-icon>
        
        <v-toolbar-title>歌手分类</v-toolbar-title>

        <template v-slot:extension>
            <div class="filter-list">
                <span class="filter-item" :class="active == item.alias && 'active'" v-for="item in filterList" :key="item.name" @click="filterSearch(item)">{{item.name}}</span>      
            </div>
            
        </template> 
        
      </v-app-bar>
        <ul class="singer-list" id="singer-list">
            <li class="singer-item" v-for="(item,i) in singerList" :key="i"
                @click="gotoSingerDetail(item)"
            >
                <img class="singer-avatar" :src="item.picUrl+'?imageView&thumbnail=100y100&quality=75&tostatic=0'" alt=" ">{{item.name}}
            </li>
        </ul>

        <Control />
  </div>
</template>

<script>
import api from '@/api'
import Control from '@/components/control/control'
export default {
  components: { Control },
    data(){
        return {
            filterList: [
                {
                    name: '华语',
                    alias: 1
                },
                {
                    name: '欧美',
                    alias: 2
                },
                {
                    name: '韩国',
                    alias: 3
                },
                {
                    name: '日本',
                    alias: 4
                }
            ],
            singerList:[],
            active: 1,
            singerFilterList: []
        }
    },
    methods: {
        gotoSingerDetail(data){
            this.$router.push({
                path: '/singer/detail',
                query:{
                    id: data.id
                }
            })
        },

        filterSearch(data){
            this.active = data.alias;
            api.searchSinger(data.alias).then(res =>{

                this.singerList = res.data.list.artists;

            });
        }
    },
    created(){
        this.filterSearch(this.filterList[0]);
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/global.scss';
    .singer-wrapper {

        .v-toolbar--extended {
            width: 100%;
            .v-toolbar__extension {
                .filter-list {
                    .filter-item {
                        margin-right: px2rem(14);
                        &.active {
                            color: #e96900;
                        }
                    }
                }
            }
        }


        .singer-list{
            margin-top: px2rem(100);
            overflow-y: auto;
            height: calc(100vh - 100px);
            .singer-item {
                
                margin-bottom: px2rem(6);
                padding: px2rem(6) px2rem(10);
                display: flex;
                align-items: center;
                transition: background-color .2s;
                .singer-avatar {
                    border-radius: 50%;
                    height: px2rem(40);
                    width: px2rem(40);
                    margin-right: px2rem(10);
                }

                &:active {
                    background-color: #eee;
                }
            }
        }
        
    }
</style>